<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>

    <!-- 面包屑 -->
    <div class="nav">
      <span class="layui-breadcrumb">
        <a href="/dashBoard">仪表盘</a>
        <a><cite>商品列表</cite></a>
      </span>
    </div>
    <!-- /面包屑 -->
    <!-- 增加商品按钮 -->
    <a href="/itemAdd" style="margin-top: 15px" class="layui-btn layui-btn-warm">增加商品</a>
    <!-- /增加商品 -->
    <!-- 商品列表  -->
    <table class="layui-table">
      <thead>
        <tr>
          <th>商品名</th>
          <th>价格</th>
          <th>描述</th>
          <th>销量</th>
          <th>封面</th>
          <th>上架时间</th>
          <th>操作</th>
        </tr> 
      </thead>
      <tbody>
        <% if(items.length ===0) { %>
        <tr>
          <td  colspan="7" align="center">
            暂无商品
          </td>
        </tr>
        <%}%>
        <% for(var i=0;i<items.length; i++) {%>
        <tr>
          <td>
            <%= items[i].itemName %>
          </td>
          <td>
            <%= items[i].itemPrice %>
          </td>
          <td title="<%= items[i].itemDesc %>">
            <%= items[i].itemDesc ? (items[i].itemDesc.length> 15? items[i].itemDesc.substr(0, 15)+ '...': items[i].itemDesc): '暂无描述' %>
          </td>
          <td style="background: <%= items[i].sale>500?'#ff734c': '#33fc11' %>">
            <%= items[i].sale %>
          </td>
          <td>
            <img src="<%= items[i].thumb|| 'https://img2.baidu.com/it/u=3961378514,3816050409&fm=253&fmt=auto&app=120&f=JPEG?w=598&h=465' %>" width="100" alt="">
          </td>
          <td><%= items[i].createAt %></td>
          <td>
            <a href="/itemUpdate?_id=<%= items[i]._id %>" class="layui-btn layui-btn-xs">编辑</a>
            <button data-id="<%= items[i]._id %>" class="layui-btn del layui-btn-danger layui-btn-xs">删除</button>
          </td>
        </tr>
        <%}%>
      </tbody>
    </table>
    <!-- 分页容器 -->
    <div id="page"></div>
    <!-- /分页容器 -->
     <!-- /商品列表  -->
  <script src="/static/layui/layui.js"></script>
  <script src="/static/js/axios.js"></script>
  <script>
    layui.use(['element', 'laypage', 'layer', 'jquery'], function(){
      var element = layui.element;
      var laypage = layui.laypage;
      var layer = layui.layer;
      var $ = layui.jquery;

      

      // 删除商品
      $('.del').click(function(){
        // 弹出确定框
        var _this = this;
        layer.confirm('此操作会彻底删除该商品,确定继续吗?', {icon: 3, title:'提示'}, function(index){
          //do something
          axios.delete('/delItem', {
            params: {
              _id: _this.dataset.id
            }
          }).then(res => {
            if (res.data.code === 200) {
              layer.msg(res.data.msg, {icon: 1, time: 1500}, function(){
                // 刷新页面
                history.go(0)
              }); 
            }else{
              layer.msg(res.data.msg, {icon: 2}); 
            }
          })
          layer.close(index);
        });
      })
      // 渲染分页
      laypage.render({
        curr: <%= page %>,
        elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
        ,count: <%= total %> //数据总数，从服务端得到
        ,limit: 2
        ,layout: ['prev', 'page', 'next', 'limit', 'skip']
        ,jump: function(obj, first){
            //首次不执行
            if(!first){
              //do something
               // 动态改变地址栏地址 并 传递 page和pageSize
              location.href="/itemLists?page="+obj.curr+"&pageSize="+obj.limit;
            }
          }
      });
    })
  </script>
</body>
</html>